import React, { Component } from 'react';
import { Text, View, Dimensions, ScrollView } from 'react-native';
import styled from 'styled-components';
import InputItem from 'antd-mobile-rn/lib/input-item';
import Tab from './Tab';

export default class Work extends Component {
  state = {
    tabsConfig: [
      {
        title: '全部',
        color: 'purple',
        borderWidth: 1,
        clicked: () => {}
      },
      {
        title: '部门',
        color: '#7E8184',
        borderWidth: 0,
        clicked: () => {}
      },
      {
        title: '未激活',
        color: '#7E8184',
        borderWidth: 0,
        clicked() {}
      }
    ]
  };

  currentTab = title => {
    console.log(title);

    let arr = this.state.tabsConfig.map(item => {
      item.color = '#7E8184';
      item.borderWidth = 0;
      if (item.title === title) {
        item.color = 'purple';
        item.borderWidth = 1;
      }
      return item;
    });

    this.setState({
      tabsConfig: arr
    });
  };

  componentDidMount() {
    console.log(this.autoFocusInst.focus);
    this.autoFocusInst.focus();
  }

  render() {
    return (
      <Container>
        <SearchBox>
          <SearchContacts
            ref={ref => (this.autoFocusInst = ref)}
            placeholder="搜索">
            <SearchIcon
              source={require('../../assets/phonebook/search_icon.png')}
            />
          </SearchContacts>
        </SearchBox>
        {/* <ScrollView showsVerticalScrollIndicator={false}> */}
        <TabContainer>
          <TabsBox>
            {this.state.tabsConfig.map(item => (
              <Tab
                title={item.title}
                color={item.color}
                borderWidth={item.borderWidth}
                clicked={item.clicked}
                currentTab={title => this.currentTab(title)}
              />
            ))}
          </TabsBox>
        </TabContainer>
        {/* </ScrollView> */}
      </Container>
    );
  }
}

const Container = styled.View`
  width: 100%;
  height: 100%;
  background-color: white;
`;

const SearchBox = styled.View`
  padding-top: 20;
  padding-left: 20;
  padding-right: 20;
  margin-bottom: 20;
`;

const TabContainer = styled.View`
  width: 100%;
  height: ${Dimensions.get('window').height};
  background-color: #ccc;
`;

const TabsBox = styled.View`
  flex-direction: row;
  height: 50;
  background-color: white;
`;

const SearchContacts = styled(InputItem)`
  background-color: #f1f1f3;
  border-radius: 12;
`;
const SearchIcon = styled.Image`
  width: 16.67;
  height: 16.67;
  margin-left: 30;
`;
